<template>
  <div>
    <el-form :inline="inline" :model="formInline" label-position="right">
      <el-row :gutter="26" type="flex">
        <el-col :span="26">
          <el-form-item label="省：" prop="province" label-width="170">
            <el-input
              v-model.trim="formInline.province"
              placeholder="请输入省名称"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="市：" prop="municipality" label-width="170">
            <el-input
              v-model.trim="formInline.municipality"
              placeholder="请输入市名称"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item label="区：" prop="region" label-width="170">
            <el-input
              v-model.trim="formInline.region"
              placeholder="请输入区名称"
              style="width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item label="年级：" prop="grade" label-width="170">
            <el-input
              v-model.trim="formInline.grade"
              placeholder="请输入年级"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item
          v-if="authority([4])"
            label="课节状态："
            prop="class_session_status"
            label-width="170"
          >
            <el-select
              v-model="formInline.class_session_status"
              placeholder="请选择课节状态"
              clearable
              style="width: 200px"
              @change="search(1, $event)"
            >
              <el-option
                v-for="item in is_class_session_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
          v-else
            label="课节状态："
            prop="class_session_status"
            label-width="170"
          >
            <el-select
              v-model="formInline.class_session_status"
              placeholder="请选择课节状态"
              clearable
              style="width: 200px"
              @change="search(1, $event)"
            >
              <el-option
                v-for="item in class_session_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="上课日期：" label-width="170">
            <el-date-picker
              v-model="formInline.calss_time"
              type="date"
              style="width: 200px"
              value-format="YYYY-MM-DD"
              placeholder="请选择上课日期"
              :size="size"
            />
          </el-form-item>
          <el-form-item
            label="上课时间："
            prop="calss_time_slot"
            label-width="170"
          >
            <!-- <el-input
              v-model.trim="formInline.calss_time_slot"
              placeholder="请输入上课时间"
              style="width: 200px"
            ></el-input> -->
            <el-time-picker
              v-model="formInline.calss_time_slot"
              value-format="HH:mm:ss"
              placeholder="请选择上课时间"
              style="width: 200px"
              :clearable="false"
            ></el-time-picker>
          </el-form-item>
          <el-form-item
            label="下课时间："
            prop="calss_time_last"
            label-width="170"
          >
            <el-time-picker
              v-model="formInline.calss_time_last"
              value-format="HH:mm:ss"
              placeholder="请选择下课时间"
              style="width: 200px"
              :clearable="false"
            ></el-time-picker>
          </el-form-item>
          <el-form-item label="督课人员：" prop="staff_name" label-width="170">
            <el-select
              style="width: 200px"
              v-model="formInline.zxguser_name"
              filterable
              remote
              placeholder="请输入督课人员名称"
              :loading="loading"
              :remote-method="zxuserMethod"
            >
              <el-option
                v-for="item in zxguserList"
                :key="item.username"
                :label="item.username"
                :value="item.username"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="是否暂停" prop="is_pause" label-width="170">
            <el-select
              v-model="formInline.is_pause"
              placeholder="请选择是否暂停"
              clearable
              style="width: 200px"
            >
              <el-option
                v-for="item in is_pauseList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="是否代课" v-if="is_daike" prop="is_daike" label-width="170">
            <el-select
              v-model="formInline.is_daike"
              placeholder="请选择是否代课"
              clearable
              style="width: 200px"
            >
              <el-option
                v-for="item in is_duser"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item> 
          <el-form-item label="是否首课" prop="is_image" label-width="170">
            <el-select
              v-model="formInline.is_image"
              placeholder="请选择是否首课"
              clearable
              style="width: 200px"
            >
              <el-option
                v-for="item in is_shouk"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
  <script>
import { setStorage, getStorage } from "@/utils/util";

export default {
  props: {
    is_daike: {
      typeof: Boolean,
      default: true,
    },
    // 是否内联 一般true是h5的情况下
    inline: {
      typeof: Boolean,
      default: true,
    },
  },
  data() {
    return {
      userInfo: "",

      loading: false,
      zxguserList: [],
      formInline: {},
      class_session_status: [
      {
          value: "1",
          label: "已完成",
        },
        {
          value: "2",
          label: "异常",
        },
        {
          value: "-1",
          label: "待完成",
        },
      ],
      class_status: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "异常",
        },
      ],
      volunteer_stauts: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "异常",
        },
      ],
      is_pauseList: [
        {
          value: "1",
          label: "未暂停",
        },
        {
          value: "2",
          label: "暂停",
        },
      ],
      is_duser: [
        {
          value: "1",
          label: "未代课",
        },
        {
          value: "2",
          label: "代课",
        },
      ],
      is_shouk: [
        {
          value: "1",
          label: "首课",
        },
        {
          value: "2",
          label: "非首课",
        },
      ],
      is_class_session_status: [
        {
          value: "1",
          label: "已开课",
        },
        {
          value: "2",
          label: "异常",
        },
        {
          value: "-1",
          label: "未开课",
        },
      ],
    };
  },
  mounted() {
    // console.log(JSON.parse(getStorage("courseObj")), "----获取到的courseObj");
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限

    this.courseObj = JSON.parse(getStorage("courseObj"));
  },
  methods: {
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },
    zxuserMethod(query) {
      const that = this;
      //console.log(query, "query");

      if (query) {
        this.loading = true;
        // 模拟异步操作
        setTimeout(() => {
          that.loading = false;
          that.zxguserList = that.courseObj.zxguser.filter((item) => {
            return item.username.toLowerCase().includes(query.toLowerCase());
          });
        }, 200);
      } else {
        that.zxguserList = [];
        that.loading = false;
      }
    },
    search(i, e) {
      if (i === 1) {
        this.formInline.class_session_status = this.class_session_status.find(
          (item) => item.value == e
        )?.value;
      }

      if (i === 2) {
        this.formInline.status = this.class_status.find(
          (item) => item.value == e
        ).value;
      }

      if (i === 3) {
        this.formInline.volunteer_stauts = this.volunteer_stauts.find(
          (item) => item.value == e
        )?.value;
      }

      if (i === 4) {
        this.formInline.is_pause = this.is_pauseList.find(
          (item) => item.value == e
        )?.value;
      }

      //   this.getData();
    },
    reset() {
      // 数据清空
      this.formInline = {};
    },
    // 清除空字段的函数
    clearEmptyFields(obj) {
      return Object.fromEntries(
        Object.entries(obj).filter(
          ([key, value]) =>
            value !== null && value !== undefined && value !== ""
        )
      );
    },

    returned() {
      // 数据返回
      let formInlines = { ...this.formInline };
      if (
        this.formInline.calss_time_slot &&
        typeof this.formInline.calss_time_slot == "object"
      )
        formInlines.calss_time_slot = this.formInline.calss_time_slot.join("-");

      return formInlines;
    },
    mounted() { 
    this.courseObj = JSON.parse(getStorage("courseObj"));
    let seobjs = this.$route.query;
    this.formInline = seobjs;
  },
  },
};
</script>
  